<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏动画</title>
    <link rel="stylesheet" href="./css/loding2.css">
    <link rel="stylesheet" href="./css/loding.css">
    <link rel="stylesheet" href="./css/index.css"> 
    <style>
        
        *{
            margin: 0;
            padding: 0;
            caret-color: transparent;
        }
        .login{
            background-repeat: no-repeat;
            border:2px solid rgba(172, 86, 212, 0.562);
            width: 10em;
            height: 10em;
             border-radius: 50%;  
             overflow: hidden;
             box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.692);
             transition: linear 0.5s;
        }
        .login:hover{
            transform: scale(1.03);
        }
        nav{
            width: 20em;
            height: 30em;
            justify-content: center;
            align-items:flex-start;
            display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 10;
            flex-wrap: wrap;
            align-content: flex-start;
            text-align: center;
            animation: chuxian 1.5s 7.5s ;
             opacity: 0;
             animation-fill-mode: forwards;
        }
        nav .welcome{
            perspective: 850px;
		    perspective-origin: 50% 0%;
            margin-top: 5px;
            font-family: 'Quicksand',sans-serif;
            width: 20em;
            height: auto;
            font-size: 3rem;
            color: transparent;
            text-shadow: 
             0px 0px 1px rgba(255,255,255,0.6),
             0px 4px 4px rgba(0, 0, 0, 0.5);
            letter-spacing: 0.2rem;
        }
      
        img{
            width: 100%;
            height: 100%;
        }
        .music-icon{
            border-radius:50%;
            border:1px solid rgba(228, 218, 126, 0.562);
            width: 2em;
            height: 2em;
          position: absolute;
           top: 1em;
         right: 5%;
           z-index: 15;
          background-image: url(./public/music.png);
          text-align: center;
          overflow: hidden;
          cursor: pointer;
          animation: infinite;
          
        }
        #stop{
            position: absolute;
           top: 2em;
         right: 5%;
           z-index: 15;
            width: 2em;
            height: 1px;
            background: rgba(228, 218, 126, 0.562);
            transform: rotate(45deg);
            cursor: pointer;
          animation: infinite;
         
        }
        @keyframes chuxian {
            to{
                opacity: 1;
            }
        }
        @keyframes music-play {
            to{
               transform: rotate(360deg);
            }
        }
        @keyframes noAction {
            to{
              opacity: 0;  
            }
        }
    </style>
</head>
<body>
    <div class="load">
        <div>G</div>
        <div>N</div>
        <div>I</div>
        <div>D</div>
        <div>A</div>
        <div>O</div>
        <div>L</div>
    </div>
    <div style="position: absolute; top: 60%;left: 50%; z-index: 15;transform: translate(-50%,-50%);">
        <div class="box" >
            <button class="btn1" id="btnBox" onclick="handleClick()"><label>Click</label></button>
        </div>
        <nav>
            <div class="login">
               <img src="./public/001.png">
            </div>
            <div class="welcome">Hello World</div>
        </nav>
    </div>
    <div id="music" class="music-icon" onclick="handleClick_music()">  
    </div>
    <div id="stop" style="display: block;" onclick="handleClick_music()"></div>
    <audio id="music1" autoplay>
       
    </audio>

</body>
<script src="./routes/ajax.js"></script>
<script src='./routes/actionListener.js'></script>
<script>
    var audio = document.getElementById("music1")
    var stop = document.getElementById('stop')
    var music= document.getElementById('music')
    var btnBox = document.getElementById('btnBox')
    console.log(btnBox)
    let loginList={password:"123"}
    let musicList=["loginMusic","loginMusic2","loginMusic3","loginMusic4","loginMusic5"]
    let oldsrc =`${musicList[Math.floor(Math.random()*musicList.length)]}`
    audio.src="media/"+oldsrc+".mp3"
    
    function random(){
           for(let i =0;i<=musicList.length;i++){
               if(musicList[i] == oldsrc){
                   let miniList= musicList.concat()
                   miniList.splice(i,1)
                   console.log(miniList)
                   let newsrc=`${miniList[Math.floor(Math.random()*(musicList.length-1))]}`
                   oldsrc=newsrc
                   console.log(miniList[Math.floor(Math.random()*(musicList.length-1))])
                   return newsrc
               }
           }
        }
        
        console.log(random())
    audio.addEventListener('ended',function(){
        let newsrc=random()
        audio.src="media/"+newsrc+".mp3"
        console.log(newsrc)
    },false)
    if(audio.paused==true){
        stop.style.display="none"
        music.style.animation="music-play 6s linear infinite"
    }

    function handleClick(){
      ajax("POST",'http://127.0.0.1:8080/v1/login',`password=${loginList.password}`).then(val=>{
            console.log(val)
            setTimeout(() => {
                window.location.href="/views/main.html"
            }, 2000);

        })
    //    let xhr =new XMLHttpRequest()
    //    xhr.onreadystatechange=function(){
    //        if(xhr.readyState==4){
    //            if(xhr.status>=200 && xhr.status<300){
    //                let result = JSON.parse(xhr.responseText)
    //                if(result.code==200){
    //                 window.location.href="/views/main.html"
    //                }
    //            }
    //        }
    //    }
    //    xhr.open('POST','http://127.0.0.1:8080/v1/login',true)
    //    xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded")
    //    xhr.send(`password=${loginList.password}`)
    //    xhr.send(JSON.stringify(loginList)) 
    }
      function handleClick_music(){
          if (audio.paused==true){
            stop.style.display="none"
            audio.play()
            music.style.animationPlayState="running"
          }else{
            stop.style.display="block"
            audio.pause()
            music.style.animationPlayState="paused"
          }
      }
      actionListener()
      

      
</script>

</html>
